<template>
	<view class="view-fiex">
		<mo-swiper-list 
		:actions="actions"
		:current="current"
		:tabList="tabList">
			<template #header="{ page, itemIndex}">
				<view class="header">
					header {{itemIndex}} - {{page.name}}
				</view>
			</template>
			<template v-slot="{ page, itemIndex}">
				<!-- <div v-if="itemIndex==1">111</div> -->
				<view class="pannel" v-for="item in page.data" :key="item.id">
					<view class="swiper-item-list">
						{{ item.key }} - {{ item.id }} - {{ item.name }}
					</view>
				</view>
            </template>
		</mo-swiper-list>
	</view>
</template>

<script>
	import swiperPage from '@/components/mo-swiper-list/swiper-page.vue'
	import { mapActions, mapState } from 'vuex'
    import { testApi } from '@/api'
	export default {
		components: {
			swiperPage
		},
		data() {
			return {
                tabList: [],
                actions: [],
				current: 0
			}
		},
		computed:{
			...mapState('novel', ['userInfo']),
		},
		onLoad(){
            for (var i = 0; i < 10; i++) {
                this.tabList.push({
                    id: "tab" + i,
                    name: 'Tabs ' + (i + 1),
                    pageid: i + 1,
					action: this.action
                })
				this.actions.push(this.action)
            }
			// 获取分类
			// this.getStatistics()
			// this.getGender()
		},
		onShow(){
			
		},
		methods: {
			...mapActions('novel',['getStatistics', 'getGender']),
            action(page=1, size=10, param={}, total){
                const params = {
					test: '传入的测试数据',
                    ...param
				}
                return testApi(page, size, params, total)
            },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f8f8f8;
	}
	.view-fiex{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100vh - constant(safe-area-inset-bottom));
		height: calc(100vh - env(safe-area-inset-bottom));
		/* #ifndef MP-WEIXIN */
		height: calc(100vh - 44px - constant(safe-area-inset-bottom));
		height: calc(100vh - 44px - env(safe-area-inset-bottom));
		/*  #endif  */
		mo-swiper-list{
			flex: 1;
		}
	}
	.pannel{
		padding: 20rpx 0;
	}
	.swiper-item-list {
		padding: 30rpx;
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 16rpx rgba($color: #000000, $alpha: .05);
	}
	.header{
		padding: 20rpx;
		background: #fff;
	}
</style>
